
<template>
  <div>
    <div class="home" @click="test()">移动车</div>
    <div class="test" @click="test1()">666</div>
    <Player />
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import Player from "@/components/player/player";
import { getMockData } from "@/api/connect";
export default {
  computed: {
    // 获取AirCity模块里的状态
    ...mapState("AirCity", ["AirCityApi", "AirCityPlayer"]),
    ...mapState("Worker", ["addWorker", "updataWorker", "deleteWorker"]),
  },
  data() {
    return {
      HostConfig: "C:\\Users\\fhb\\AppData\\Roaming\\AirCityCloud\\SDK",
      result: null,
    };
  },
  created() {
    // 创建worker
    let addWorker = this.$worker.create([
      {
        message: "add",
        // 传入当前车对象
        func(e) {
          console.log(e, "传进来的内容");
          return "ok";
        },
      },
    ]);
    let updataWorker = this.$worker.create([
      {
        message: "updata",
        // 传入当前车对象
        async func(current) {
          let { trackId: id, location } = current;
          __g.customObject.setLocation(id, location);
        },
      },
    ]);
    let deleteWorker = this.$worker.create([
      {
        message: "delete",
        // 传入当前车对象
        async func(current) {
          let { trackId: id } = current;
          await __g.customObject.delete(id);
        },
      },
    ]);

    // 提交仓库
    this.addWorker_mut(addWorker);
    this.updataWorker_mut(updataWorker);
    this.deleteWorker_mut(deleteWorker);
  },
  mounted() {
    this.get();
  },
  components: { Player },
  methods: {
    ...mapMutations({
      addWorker_mut: "Worker/addWorker_mut",
      updataWorker_mut: "Worker/updataWorker_mut",
      deleteWorker_mut: "Worker/deleteWorker_mut",
    }),
    ...mapActions({
      //异步action
      addWorker_act: "Worker/addWorker_act",
    }),
    async get() {
      let { data } = await getMockData();
      this.result = data;
    },
    // 创建车对象
    async creatCar(arr) {
      //此时可以调用接口了
      arr.forEach(async (item) => {
        let { trackId: id, location } = item;
        let obj = {
          id,
          pakFilePath: HostConfig.Path + "/media/custom.pak",
          assetPath: "/Game/Common/Asset_Bank/Mesh/Car/BP_Car_JiuHuChe",
          location: location.reverse(),
          rotation: [0, 0, 0],
          scale: [1, 1, 1],
          smoothMotion: 1, //1: 平滑插值，0: 跳跃
          coordinateType: 1, //设置坐标系：0(Projection), 1(WGS84)
        };
        await __g.customObject.add(obj);
      });
    },
    // 设置车位置
    setCar(arr) {
      arr.forEach(async (item) => {
        let { trackId: id, location } = item;
        await __g.customObject.setLocation(id, location.reverse());
      });
    },
    // 删除车
    deleteCar(arr) {
      arr.forEach(async (item) => {
        let { trackId: id } = item;
        await __g.customObject.delete(id);
      });
    },
    async test() {
      if (__g) {
        await __g.camera.set(
          492996,
          2491966,
          31.160116,
          -14.463061,
          144.119186
        );
      }
      await __g.customObject.clear();
      let TimeOut = (fn, time) =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            fn();
            resolve();
          }, time);
        });
      // 循环每个时间点
      console.time("开始");
      this.result.forEach(async (item, index) => {
        await TimeOut(() => {
          // console.log(index,'index');
          if (index === 0) {
            this.creatCar(item);
            // 添加车
          } else {
            let preArr = this.result[index - 1];
            let preId = preArr.map((v) => v.trackId);
            let curId = item.map((v) => v.trackId);
            //上个数组和这个数组里都有 更新车
            // 交集
            let updataArr = item.filter((v) => preId.indexOf(v.trackId) !== -1);
            this.setCar(updataArr);
            // 上个数组里有 这个没了  删除车
            let deleteArr = preArr.filter(
              (v) => curId.indexOf(v.trackId) === -1
            );
            this.deleteCar(deleteArr);
            // 上个数组里没有  这个数组里有  新增
            let addArr = item.filter((v) => preId.indexOf(v.trackId) === -1);
            this.creatCar(addArr);
          }
        }, index * 1200);
      });
      console.timeEnd("开始");
    },
    test1() {
      this.addWorker_act()
      // this.addWorker.postMessage("add",this.AirCityApi)
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  z-index: 999;
  width: 90px;
  height: 50px;
  background-color: pink;
  position: absolute;
  left: 0;
  top: 0;
}

.test {
  z-index: 999;
  width: 90px;
  height: 50px;
  background-color: pink;
  position: absolute;
  left: 200px;
  top: 0;
}

.send {
  z-index: 999;
  width: 90px;
  height: 50px;
  background-color: pink;
  position: absolute;
  left: 400px;
  top: 0;
}
</style>
